<template>
  <div class="containerbox">
    <el-container>
      <el-aside>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" v-for="(item, i) in goodsAsideList" :key="i" background-color="#F2F2F2" router>
          <el-submenu :index="i + 1 + ''">
            <template slot="title">
              <span slot="title">{{ item.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="(v, i) in item.children" :index="v.path" :key="i + 10">{{ v.title }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <keep-alive v-if="$route.meta.keepAlive">
          <router-view></router-view>
        </keep-alive>
        <router-view v-else></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsAsideList: []
    }
  },
  methods: {
    async getAsideList() {
      const { data: res } = await this.$axios.get('/goods/aside')
      console.log(res, 'goodsAside')
      if (res.status !== 200) return this.$message.error('获取菜单栏数据失败')
      this.goodsAsideList = res.asideList
    }
  },
  created() {
    window.vm = this
    this.getAsideList()
  }
}
</script>

<style lang="less" scoped>
.el-aside {
  background: #ccc;
  width: 250px !important;
}
.el-main {
  background: #fff;
}
.shrinkBtn {
  background: #ccc;
  width: 100%;
  height: 60px;
  .el-switch {
    margin: 20px 0 0 16px;
  }
}
.el-menu {
  border: none;
}
.el-menu-item {
  padding-left: 60px !important;
}
</style>
